<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="icon" th:href="@{images/favicon.ico}">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }

        .layui-input, .layui-textarea {
            width: 40% !important;
            display: inline;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <div class="layuimini-container">
        <div class="layuimini-main">

            <div class="layui-form layuimini-form">
                <input type="hidden" name="id" th:value="${session.userId}">
                <div class="layui-form-item">
                    <label class="layui-form-label required">当前密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="old_password" lay-verify="required" lay-reqtext="当前密码不能为空"
                               placeholder="请输入当前密码" class="layui-input">
                        <tip>填写改账号的当前密码。</tip>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">新密码</label>
                    <div class="layui-input-block">
                        <input type="password" id="password" name="new_password" lay-verify="required|password"
                               lay-reqtext="新密码不能为空"
                               placeholder="请输入新密码" class="layui-input">
                        <tip id="msg" style="color: red;display: none">密码不能为空</tip>
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">确认新密码</label>
                    <div class="layui-input-block">
                        <input type="password" id="newPassword" name="again_password" lay-verify="required"
                               lay-reqtext="确认新密码不能为空"
                               placeholder="请确认新密码" class="layui-input">
                        <tip id="nMsg" style="color: red;display: none">两次密码不一致</tip>
                    </div>

                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" id="btn-submit" lay-submit lay-filter="saveBtn">
                            确认修改
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script th:inline="javascript">
    var ctxPath = [[@{/}]];
        layui.use(['form', 'miniTab'], function () {
            var form = layui.form,
                layer = layui.layer,
                miniTab = layui.miniTab;
            var $ = layui.$;

            form.verify({
                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                password: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });

            //监听提交
            form.on('submit(saveBtn)', function (data) {
                //点击提交按钮后禁用
                $("#btn-submit").attr("disabled", "disabled").addClass("layui-btn-disabled");
                console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                //异步请求提交数据
                var url = ctxPath + 'user';
                data.field._method = 'put';
                $.post(url, data.field, function (response) {
                    //提交成功,弹出提示框
                    if (response.code == 0) {
                        layer.msg(response.message, {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            //修改成功重新登录
                            setTimeout(" window.location = ctxPath + 'login'");
                        });
                    } else {
                        //点击添加按钮失败后取消禁用
                        $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
                        //失败则提示错误信息，窗口不关闭
                        layer.alert(response.message, {
                            icon: 2,
                            anim: 6,
                            title: '操作失败',
                        }, function (index) {
                            layer.close(index);
                        });
                    }
                });
            });

        });
</script>

<script>
    var pwd = document.getElementById("password");
    var nPwd = document.getElementById("newPassword");
    var msg = document.getElementById("msg");
    var nMsg = document.getElementById("nMsg");

    //新密码不为空判断
    pwd.onblur = function () {

        if (pwd.value == '' || pwd.value == null) {
            msg.style.display = 'block';
            $("#btn-submit").attr("disabled", "disabled").addClass("layui-btn-disabled");
            return false;
        }
    };

    //新密码验证
    pwd.onblur = function () {
        if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(pwd.value)) {
            $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
            msg.style.display = "none";
            nPwdV();
        } else {
            msg.style.display = "block";
            $("#btn-submit").attr("disabled", "disabled").addClass("layui-btn-disabled");
            msg.innerText = "密码至少包含 数字和英文，长度6-20";
            return false;
        }

    };

    // //新密码改变消失
    // pwd.oninput = function () {
    //     if (pwd.value != null) {
    //         $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
    //         msg.style.display = 'none';
    //     }
    // };
    //确认两次密码是否一样判断
    function nPwdV() {
        nPwd.onblur = function () {
            //不一样
            if (pwd.value != nPwd.value) {
                nMsg.style.display = 'block';
                $("#btn-submit").attr("disabled", "disabled").addClass("layui-btn-disabled");
                return false;
            }
            //一样
            if (pwd.value == nPwd.value && /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(pwd.value)) {
                $("#btn-submit").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
                nMsg.style.display = 'none';
            }
        };
    }
</script>

</body>
</html>
